<template>
  <view class="commodity_box">
    <view class="top_box flex"
      ><image src="/static/mf/home/coin/FIL.png" />
      <view v-if="locale == 'zh_TW'">{{ machinery.name }}</view>
      <view v-else>{{ machinery.name_en }}</view>
    </view>
    <view class="center_box flex">
      <view class="flex1">
        <view class="center_box_name">{{ $t("mf.home.initial_storage") }}</view>
        <view class="center_box_name">{{ $t("mf.home.unit_amount") }}</view>
        <view class="center_box_name">{{ $t("mf.home.contract_period") }}</view>
        <!-- <view class="center_box_name">{{
          $t("mf.home.remaining_number")
        }}</view> -->
      </view>
      <view>
        <view class="center_box_data">{{ machinery.power }}TB</view>
        <view class="center_box_data" style="color: rgba(254, 232, 178, 1)"
          >{{ machinery.price }} {{ machinery.pay_symbol }}</view
        >
        <view class="center_box_data">{{ machinery.cycle_day }}</view>
        <!-- <view class="center_box_data">{{ number }}</view> -->
      </view>
    </view>
    <view class="bottom_box flex">
      <view class="center_box_name flex1" style="font-size: 24rpx">{{
        $t("mf.home.mining_date")
      }}</view>
      <view class="center_box_name" style="font-size: 24rpx">{{
        $t("mf.home.mining")
      }}</view>
    </view>
    <button class="now_buy" @tap.stop="goBuy(machinery.id)">
      {{ $t("mf.good.now_buy") }}
    </button>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  props: {
    machinery: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    goBuy(id) {
      this.handleNavTo({ url: "/pages/mf/shop/orderPay?id=" + id });
    },
  },
  computed: {
    ...mapGetters("system", ["locale"]),
  },
};
</script>

<style scoped>
.commodity_box {
  width: 100%;
  height: 728rpx;
  background: linear-gradient(270deg, #1b1b2b 0%, #232534 100%);
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.5);
  border-radius: 12rpx;
  margin-bottom: 30rpx;
  padding: 40rpx;
  box-sizing: border-box;
}
.top_box {
  width: 100%;
  align-items: center;
  font-size: 32rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #fff;
  margin-bottom: 38rpx;
}
.top_box image {
  width: 64rpx;
  height: 64rpx;
  margin-right: 42rpx;
}
.center_box {
  border-bottom: 1px solid rgba(21, 25, 53, 1);
  box-sizing: border-box;
  padding-bottom: 30rpx;
  margin-bottom: 10px;
}
.center_box_name {
  height: 80rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  line-height: 80rpx;
}
.center_box_data {
  height: 80rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-align: right;
  line-height: 80rpx;
}
.bottom_box {
  margin-bottom: 60rpx;
}
.now_buy {
  width: 516rpx;
  height: 100rpx;
  background-image: url("/static/auth/login/btn_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 55rpx;
  line-height: 100rpx;
  font-size: 34rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #2b2c3e;
}
</style>